import React from "react";
import { useNavigate } from "react-router-dom";
import Z1 from "../component/Z1";
const Cshou = () => {
  const navigate = useNavigate();
  return (
    <div>
      {/* 主要内容区域 */}
      <div style={{ backgroundColor: "#f1c588", width: "600px", margin: "0 auto", paddingBottom: "60px" }}>
        {/* 现有内容 */}
        <div>
          <img
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/banner.b400cde7.jpg?x-oss-process=image/format,webp"
            alt=""
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/btn.ec4ae581.png?x-oss-process=image/format,webp"
            style={{ width: "100%", height: "auto" }}
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_1.a041aeef.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_2.ca941397.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_3.5d406b07.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_4.ddec57c2.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_5.d8205b90.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_6.35fec78a.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_7.ab871903.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_8.5209ade4.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_9.4ada8e47.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_10.6b526bb5.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_11.3986fc1e.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_12.4a319470.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_13.96e11372.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://zx.tengzhihh.com/bdshengchenyunshi/static/index_14.763eced3.jpg?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto", backgroundColor: "red" }}
            src="https://img-fe.tengzhihh.com/image/bdedb289f3af99-355x52.png?x-oss-process=image/format,webp"
          />
        </div>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://img-fe.tengzhihh.com/image/a327874431df51-590x512.png?x-oss-process=image/format,webp"
          />
        </div>
        <Z1/>
        <div>
          <img
            style={{ width: "100%", height: "auto" }}
            src="https://img-fe.tengzhihh.com/images/a51de58f6980ec-722x94.png"
          />
        </div>
      </div>

      {/* 固定底部栏 */}
      <div
        style={{
          position: "fixed", // 固定定位
          bottom: 0, // 贴着底部
          width: "560px", // 与根元素宽度一致
          left: "50%", // 居中
          transform: "translateX(-50%)", // 水平居中调整
          backgroundColor: "#f1c588", // 背景颜色
          height: "60px", // 高度
          display: "flex", // 弹性布局
          justifyContent: "space-between", // 两端对齐
          alignItems: "center", // 垂直居中
          padding: "0 20px", // 内边距
          boxShadow: "0 -2px 5px rgba(0, 0, 0, 0.1)", // 阴影效果
          zIndex: 1000, // 确保在最上层
        }}
      >
        <div>
          <p style={{ color: "#666", fontSize: "16px", margin: 0 }}>更多测算</p>
        </div>
        <div
          style={{
            backgroundColor: "#ffaa00", // 按钮背景颜色
            borderRadius: "50%", // 圆形
            width: "50px", // 宽度
            height: "50px", // 高度
            display: "flex", // 弹性布局
            justifyContent: "center", // 水平居中
            alignItems: "center", // 垂直居中
            textAlign: "center",
          }}
        >
          <p style={{ color: "#fff", fontSize: "14px", margin: 0 }} onClick={()=>navigate("/suan")}>开始</p>
          <p style={{ color: "#fff", fontSize: "14px", margin: 0 }}>分析</p>
        </div>
        <div>
          <p onClick={()=>navigate("/order")} style={{ color: "#666", fontSize: "16px", margin: 0 }}>订单查询</p>
        </div>
      </div>
    </div>
  );
};

export default Cshou;